<template>
  <div class="container">
    <div class="card" style="margin-top: 10vh; border-radius: 10px">
      <div class="card-body">
        <form @submit.prevent="login">
          <div class="form-group row d-flex justify-content-center mx-auto" style="width: 80%">
            <label for="username" style="font-size: 20px">账户名</label>
            <input
              v-model="userAccount"
              type="text"
              class="form-control"
              id="username"
              aria-describedby="emailHelp"
              style="border-radius: 10px"
            />
          </div>
          <div class="form-group row d-flex justify-content-center mx-auto" style="width: 80%">
            <div class="col d-flex justify-content-center">
              <label for="userpassword" style="font-size: 20px">密码</label>
            </div>
            <input
              v-model="userPassword"
              type="password"
              class="form-control"
              id="userpassword"
              aria-describedby="emailHelp"
              style="border-radius: 10px"
            />
          </div>
          <div class="row">
            <div class="col d-flex justify-content-center align-items-center">
              <button
                type="submit"
                class="btn btn-primary d-flex justify-content-center"
                style="width: 20%"
              >
                <span>登</span>
                <span class="ml-2">录</span>
              </button>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useLoginStore } from '@/stores/loginStore.js'
import { userlogin } from '@/api/user.js'
import { useToastStore } from '@/stores/toastStore.js'
import router from '@/router/index.js'
import { message } from 'ant-design-vue'
const toastStore = useToastStore()

const userAccount = ref('')
const userPassword = ref('')
const loginStore = useLoginStore()
const errorMessage = ref('')
const login = async () => {
  try {
    const res = await userlogin({
      userAccount: userAccount.value,
      userPassword: userPassword.value,
    })
    if (res?.data?.code === 0 && res?.data?.data) {
      loginStore.setLoginuser(res.data.data)
      router.replace('/')
    } else {
      message.error(res?.data?.message)
    }
  } catch (e) {
    toastStore.set(true, e.message)
  }
}
</script>

<style>
.card {
  background-color: rgba(58, 120, 164, 0.4);
}

button > span {
  font-size: 20px;
}
</style>
